@solid-devtools/debugger

@solid-devtools/debugger

A runtime package, used to get information and track changes of the Solid's reactivity graph. It's a cornerstone of the rest of the packages.

Usage Guide

Installation

npm i @solid-devtools/debugger
# or
yarn add @solid-devtools/debugger
# or
pnpm add @solid-devtools/debugger

Automatically Attaching Debugger

In Solid version 1.4.5, a _$afterCreateRoot dev hook was added to allow for automatic attaching of the debugger.

That means that you can use the debugger in your Solid apps without having to manually attach it to every root or the reactive graph in your application. To enable automatic attaching, you need to add the following code to the entry point of your app:

If you use solid-devtools package, this is already handled for you!

import { attachDebugger, makeCreateRootListener } from '@solid-devtools/debugger'

makeCreateRootListener(root => attachDebugger(root))

Manually Attaching Debugger

If you don't want to automatically attach debugger, it can be done manually. It will give you the freedom to attach debugger to any root you choose.

To do so you need to import the debugger package and use one of the two primitives:

attachDebugger

This is a hook that will attach the debugger to the reactive owner of the scope it was used under. For example you might want to use it in you <App> component, or directly in the render function. It can be used in many places at once without any issues.

import { render } from 'solid-js/web'
import { attachDebugger } from '@solid-devtools/debugger'

render(() => {
  attachDebugger()
  return <App />
}, document.getElementById('root'))

// or inside the App component:
function App() {
  attachDebugger()
  return <>...</>
}

Debugger

The debugger component works exactly like attachDebugger, but it may be more convenient to use at times.

import { render } from 'solid-js/web'
import { Debugger } from '@solid-devtools/debugger'

render(
  () => (
    <Debugger>
      <App />
    </Debugger>
  ),
  document.getElementById('root'),
)

Reattaching sub roots back to the tree

If you choose to attach debugger manually, you have to do that with every sub root, even if it is theoretically a part of existing and attached tree. This is because Solid doesn't attach roots created with createRoot to it's detached parent, so the debugger has no way of reaching it. To reattach this root back to the tree tracked by the debugger — simply put another attachDebugger call inside it.

More in this issue

This also will be necessary when using components that use createRoot internally, like <For>, <Index> or <Suspense>.

Note This applies only when you are attaching roots manually. For automatic attaching, this is already handled.

<For each={list()}>
	{item => (
		<Debugger>
			<ItemComponent title={item} />
		</Debugger>
	)}
<For>

// or call attachDebugger inside ItemComponent
function ItemComponent(props){
	attachDebugger()
	return <li>props.title</li>
}

Changelog

See CHANGELOG.md.